<template>
	<view class="goldPay">
		<view class="goldPay-top">
				<text class="title">买入金额</text>
				<input class="payInput" type="text" value="" placeholder-style="color:#aeaeae" placeholder="500.00元起购"/>
				<text class="instructions"><text class="day">03月15日</text>(今日)开始计算收益;金价实时波动，实际成交价以民生银行确认为准</text>
		</view>
		<view class="goldPay-content">
			<view class="content-nav">
				<text class="line"></text>
				<text class="nav-text">只需要3步即可赚取收益</text>
				<text class="line"></text>
			</view>
			<view class="content-img">
				<view class="content-img-item">
					<image class="itemImg" src="../../../static/gold/item1.png" mode=""></image>
					<text class="imgText">风险测评</text>
				</view>
				<view class="content-img-item">
					<image class="itemImg" src="../../../static/gold/item2.png" mode=""></image>
					<text class="imgText">绑定银行卡</text>
				</view>
				<view class="content-img-item">
					<image class="itemImg" src="../../../static/gold/item3.png" mode=""></image>
					<text class="imgText">上传身份证</text>
				</view>
			</view>
			<view class="explain">
				<switch class="explain-Checkbox" style="transform: scale(0.5,0.5);" :checked="false"  type="checkbox"/>
				<view class="explain-text">
					<text>基金销售服务由宇宁基金提供，本人已阅读并同意该产品的基金合同，招募说明书，产品规则，信息披露材料及相关协议，充分了解产品的风险特性，并自愿承担相关投资风险。</text>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="goldPay-btn" @tap="goPayYes">
			立即购买
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			goPayYes(){
				uni.navigateTo({
					url:'../../payYes/payYes'
				})
			}
		}
	}
</script>

<style scoped>
	.goldPay{
		width: 100vw;
		height: 100vw;
	}
	.goldPay-top{
		padding: 30rpx 26rpx;
		height: 310rpx;
	}
	.title{
		color: #aeaeae;
	}
	.payInput{
		border-bottom:5rpx solid #fbfbfb ;
		margin: 40rpx 0;
		width: 270rpx;
		max-width: 100%;
		font-size: 40rpx;
		padding: 8rpx;
	}
	.instructions{
		width: 100%;
		height: 112rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		box-sizing: border-box;
		padding-left: 26rpx;
		color: #666666;
		background-color: #fff1ec;
	}
	.day{
		color: #ff7846;
	}
	/* 主体 */
	.goldPay-content{
		width: 100vw;
		height: calc(100vh - 460rpx);
		box-sizing: border-box;
		position: relative;
		background-color: #f5f5f5;
	}
	.content-nav{
		padding: 40rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}
	.line{
		width: 140rpx;
		height: 0;
		display: inline-block;
		border: 3rpx solid #ccc;
	}
	.nav-text{
		font-size: 25rpx;
		color: #5e5e5e;
	}
	.content-img{
		display: flex;
		justify-content: space-evenly;
	}
	.content-img-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.itemImg{
		width: 120rpx;
		height: 74rpx;
		margin: 10rpx 0;
	}
	.imgText{
		color: #8b8b8b;
		font-size: 28rpx;
	}
	.explain{
		width: 100vw;
		/* margin-top: 350rpx; */
		padding: 25rpx;
		position: absolute;
		bottom: 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items:flex-start;
		font-size: 25rpx;
	}
	.explain-Checkbox{
		width: 20rpx;
	}
	.explain-text{
		width: 650rpx;
		color: #8b8b8b;
	}
	.goldPay-btn{
		width: 100vw;
		height:90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #3476f1;
		color: #e6eefe;
		position: absolute;
		bottom: 0;
	}
</style>
